<template>
  <div class="rights_manage_use_detail_1">
    <el-card shadow="never" class="card-com">
      <div class="card-1">
        <searchPanel @refresh="getData('reset')" @changePanel="resizeWin">
          <!-- 查询面板 -->
          <template v-slot:search>
            <el-form
              :inline="true"
              :model="listSearch"
              class="demo-form-inline"
              label-width="120px"
            >
              <el-row :gutter="20">
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="手机号">
                    <NormalInput
                      v-model:model-value="listSearch.condition.mobile"
                      @get-data="getData('search')"
                    ></NormalInput>
                  </el-form-item>
                </el-col>
                <!-- <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                                    <el-form-item label="产品">
                                        <NormalInput v-model:model-value="listSearch.condition.productCategory"
                                            @get-data="getData('search')"></NormalInput>
                                    </el-form-item>
                                </el-col> -->
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="权益名称">
                    <NormalInput
                      v-model:model-value="listSearch.condition.equityName"
                      @get-data="getData('search')"
                    ></NormalInput>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="订单号">
                    <NormalInput
                      v-model:model-value="listSearch.condition.orderNo"
                      @get-data="getData('search')"
                    ></NormalInput>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="立减金额">
                    <NormalInput
                      v-model:model-value="listSearch.condition.minusMoney"
                      @get-data="getData('search')"
                    ></NormalInput>
                  </el-form-item>
                </el-col>
                <!-- <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="领取账号">
                    <NormalInput
                      v-model:model-value="listSearch.condition.receiveAccount"
                      @get-data="getData('search')"
                    ></NormalInput>
                  </el-form-item>
                </el-col> -->
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="核销订单号">
                    <NormalInput
                      v-model:model-value="listSearch.condition.redeemOrderNo"
                      @get-data="getData('search')"
                    ></NormalInput>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="支付ID">
                    <NormalInput
                      v-model:model-value="listSearch.condition.paymentId"
                      @get-data="getData('search')"
                    ></NormalInput>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="签约ID">
                    <NormalInput
                      v-model:model-value="listSearch.condition.signId"
                      @get-data="getData('search')"
                    ></NormalInput>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="立减金顺序">
                    <NormalInput
                      v-model:model-value="listSearch.condition.reductionOrder"
                      @get-data="getData('search')"
                    ></NormalInput>
                  </el-form-item>
                </el-col>
<!-- 
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="创建时间">
                    <TimePicker
                      v-model:operateTime="createdTime"
                      style="width: 100%"
                      @timeChange="timeChange($event, 1)"
                    >
                    </TimePicker>
                  </el-form-item>
                </el-col> -->
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="生效时间">
                    <TimePicker
                      v-model:operateTime="effectiveTime"
                      style="width: 100%"
                      @timeChange="timeChange($event, 2)"
                    >
                    </TimePicker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="失效时间">
                    <TimePicker
                      v-model:operateTime="expireTime"
                      style="width: 100%"
                      @timeChange="timeChange($event, 3)"
                    >
                    </TimePicker>
                  </el-form-item>
                </el-col>
                <!-- <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="使用时间">
                    <TimePicker
                      v-model:operateTime="usageTime"
                      style="width: 100%"
                      @timeChange="timeChange($event, 4)"
                    >
                    </TimePicker>
                  </el-form-item>
                </el-col> -->
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="核销时间">
                    <TimePicker
                      v-model:operateTime="redeemTime"
                      style="width: 100%"
                      @timeChange="timeChange($event, 5)"
                    >
                    </TimePicker>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="领取时间">
                    <TimePicker
                      v-model:operateTime="receiveTime"
                      style="width: 100%"
                      @timeChange="timeChange($event, 6)"
                    >
                    </TimePicker>
                  </el-form-item>
                </el-col>

                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="领取状态">
                    <BlackSelect
                      v-model:select-value="listSearch.condition.receiveStatus"
                      :options="receiveStatus"
                      @my-change="getData('search')"
                    ></BlackSelect>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="发放状态">
                    <BlackSelect
                      v-model:select-value="listSearch.condition.grantStatus"
                      :options="grantStatus"
                      @my-change="getData('search')"
                    ></BlackSelect>
                  </el-form-item>
                </el-col>
                <el-col :xs="24" :sm="12" :sd="12" :lg="8" :xl="6">
                  <el-form-item label="核销状态">
                    <BlackSelect
                      v-model:select-value="listSearch.condition.redeemStatus"
                      @my-change="getData('search')"
                      :options="redeemStatus"
                    ></BlackSelect>
                  </el-form-item>
                </el-col>
              </el-row>
              <el-row justify="end">
                <el-button type="primary" @click="getData('search')"
                  >查询</el-button
                >
                <el-button @click="getData('reset')">重置</el-button>
              </el-row>
            </el-form>
          </template>
          <!-- 字段添加 -->
          <template v-slot:edit>
            <el-button
              :icon="Download"
              v-permission="'EQUITY_VOUCHER_DETAIL:EXPORT'"
              title="下载渠道列表"
              @click="btnDown"
            ></el-button>
            <el-button
              :icon="List"
              v-permission="'EQUITY_VOUCHER_DETAIL:EXPORT'"
              title="查看下载渠道列表"
              @click="btnDownList"
            ></el-button>
            <DropItem v-model:table-prop="tableProp"></DropItem>
          </template>
        </searchPanel>
      </div>
      <div class="card-2">
        <!-- table数据 -->
        <OnlyTable
          ref="onlyTableRef"
          class="card-2"
          :tableProps="tableProp"
          :pageTotal="pageParams.total"
          @get-page="handPage"
          :tableData="pageParams.tableData"
          :tableHeight="pageParams.tableHeight"
          :loading="pageParams.loadIng"
        >
        </OnlyTable>
      </div>
    </el-card>
    <downList ref="downListRef" @flash="btnDownList"></downList>
  </div>
</template>

<script setup lang="ts">
import { storeToRefs } from "pinia";
import {
  onMounted,
  ref,
  nextTick,
  onUnmounted,
  defineAsyncComponent,
} from "vue";
import { ElMessage } from "element-plus";

import { Search, Plus, Refresh, Download, List } from "@element-plus/icons-vue";
import { useEnumStore } from "@/store/enumeration";
import { exportEquityVoucherDetailApiPost } from "@/api/fileDown";

import _ from "lodash";

import { orderEquityPackageDetailStore } from "./pageStore";
const { receiveStatus, grantStatus, redeemStatus } = useEnumStore();
const onlyTableRef = ref();
const { detailData, tableProp, listSearch, pageParams, addAndEditRef } =
  storeToRefs(orderEquityPackageDetailStore());
const { getDate1, detailBtn, handPage } = orderEquityPackageDetailStore();
const downListRef = ref<{ show: (title: string, row?: any) => void }>();

// 创建时间
const createdTime = ref();
// 生效时间
const effectiveTime = ref();
// 失效时间
const expireTime = ref();
// 使用时间
const usageTime = ref();
// 核销时间
const redeemTime = ref();
// 领取时间
const receiveTime = ref();

const btnDown = async () => {
  try {
    const res = await exportEquityVoucherDetailApiPost({
      condition: listSearch.value.condition,
    });
    if (res.code == 20000) {
      ElMessage({
        type: "success",
        message:
          "下载成功 请查看下载列表 未出现下载数据 可等待在刷新下载列表！",
      });
    }
  } catch (error) {
    ElMessage({
      type: "error",
      message: "下载失败 请稍后再试！",
    });
  }
};
const btnDownList = async () => {
  // 发送请求 传递数据
  downListRef.value?.show(
    "权益使用明细下载列表",
    "associateMemberOrderEquityVoucherDetail"
  );
};
const timeChange = (time: any, type: number) => {
  if (type == 1) {
    if (time && time.length > 0) {
      listSearch.value.condition.createdTimeStart = time[0];
      listSearch.value.condition.createdTimeEnd = time[1];
    } else {
      listSearch.value.condition.createdTimeStart = null;
      listSearch.value.condition.createdTimeEnd = null;
    }
  } else if (type == 2) {
    if (time && time.length > 0) {
      listSearch.value.condition.effectiveTimeStart = time[0];
      listSearch.value.condition.effectiveTimeEnd = time[1];
    } else {
      listSearch.value.condition.effectiveTimeStart = null;
      listSearch.value.condition.effectiveTimeEnd = null;
    }
  } else if (type == 3) {
    if (time && time.length > 0) {
      listSearch.value.condition.expireTimeStart = time[0];
      listSearch.value.condition.expireTimeEnd = time[1];
    } else {
      listSearch.value.condition.expireTimeStart = null;
      listSearch.value.condition.expireTimeEnd = null;
    }
  } else if (type == 4) {
    if (time && time.length > 0) {
      listSearch.value.condition.usageTimeStart = time[0];
      listSearch.value.condition.usageTimeEnd = time[1];
    } else {
      listSearch.value.condition.usageTimeStart = null;
      listSearch.value.condition.usageTimeEnd = null;
    }
  } else if (type == 5) {
    if (time && time.length > 0) {
      listSearch.value.condition.redeemTimeStart = time[0];
      listSearch.value.condition.redeemTimeEnd = time[1];
    } else {
      listSearch.value.condition.redeemTimeStart = null;
      listSearch.value.condition.redeemTimeEnd = null;
    }
  } else if (type == 6) {
    if (time && time.length > 0) {
      listSearch.value.condition.receiveTimeStart = time[0];
      listSearch.value.condition.receiveTimeEnd = time[1];
    } else {
      listSearch.value.condition.receiveTimeStart = null;
      listSearch.value.condition.receiveTimeEnd = null;
    }
  }
  getData("search");
};

onMounted(() => {
  getDate1("reset");
  nextTick(() => {
    const dom1 = document.querySelector(".card-1") as any;
    const dom2 = document.querySelector(".card-com") as any;
    if (dom2) {
      const height = dom2.offsetHeight - dom1.offsetHeight - 70;
      pageParams.value.tableHeight = height;
    }
  });
  window.addEventListener("resize", resizeWin);
});
onUnmounted(() => {
  window.removeEventListener("resize", resizeWin);
});
const resizeWin = _.debounce(() => {
  const dom1 = document.querySelector(".card-1") as any;
  const dom2 = document.querySelector(".card-com") as any;
  if (dom2) {
    const height = dom2.offsetHeight - dom1.offsetHeight - 70;
    pageParams.value.tableHeight = height;
  }
}, 200);
const getData = (type: string) => {
  if (type == "reset") {
    createdTime.value = null;
    effectiveTime.value = null;
    expireTime.value = null;
    usageTime.value = null;
    redeemTime.value = null;
    receiveTime.value = null;
    onlyTableRef.value.initPagination();
  }
  getDate1(type);
};
</script>

<style scoped lang="scss">
.rights_manage_use_detail_1 {
  height: calc(100vh - 70px);
  .card-com {
    display: flex;
    flex-direction: column;
    // height: 100%;

    .card-2 {
      flex-grow: 1;
    }
  }
}
</style>
